import React, { Component, Fragment } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';
import moment from 'moment';

import PageHeader from '@/components/PageHeader';

import {
  Card,
  Descriptions,
  Row,
  Col,
  Radio,
} from 'antd';
import { FileImageOutlined } from '@ant-design/icons';

const { Item } = Descriptions;
interface DetailProps {
  dispatch: Dispatch<any>;
  match: { params: { pid: number } },
  contractDetail: any;
}

@connect(({ partnerPosthouseContractDetail }: any) => ({
  contractDetail: partnerPosthouseContractDetail,
}))

class PosthouseContractDetail extends Component<DetailProps> {
  componentDidMount() {
    const { match: { params: { pid } } } = this.props;
    this.fetchDetailInfo(pid);
  }

  componentDidUpdate(prevProps: DetailProps) {
    const { match: { params: { pid } } } = this.props;
    if (prevProps.match.params.pid !== pid) {
      this.fetchDetailInfo(pid);
    }
  }

  fetchDetailInfo = (id: number) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'partnerPosthouseContractDetail/fetch',
      payload: { id },
    });
  }

  render() {
    const { contractDetail = {} } = this.props;
    // 派件服务费
    const deliveryServiceFee = Math.floor(contractDetail.delivery_service_fee * 100) / 10000;
    // 揽件服务费
    const sendingServiceFee = Math.floor(contractDetail.sending_service_fee * 100) / 10000;
    // 寄存服务费
    const depositServiceFee = Math.floor(contractDetail.deposit_service_fee * 100) / 10000;
    // 短信服务费
    const smsServiceFee = Math.floor(contractDetail.sms_service_fee * 100) / 10000;

    return (
      <Fragment>

        <PageHeader />

        <Card bordered={false} title="基本信息" className="paddingB10">
          <Descriptions bordered size="small">
            <Item label="所属商户">{contractDetail.fcs_name}</Item>
            <Item label="合同主体">{contractDetail.party_a_name}</Item>
            <Item label="签约驿站">{contractDetail.posthouse_name}</Item>
            <Item label="合同周期">
              {moment(contractDetail.start_day).format('YYYY-MM-DD')}
              至
              {moment(contractDetail.end_day).format('YYYY-MM-DD')}
            </Item>
            <Item label="合同编号">{contractDetail.contract_num}</Item>
            <Item label="查看合同">
              <a href={contractDetail.file_link} target="_Blank" rel="noopener noreferrer">
                <FileImageOutlined style={{ fontSize: 16 }} />
                点击预览合同
              </a>
            </Item>
          </Descriptions>
        </Card>

        <Card title="结算信息" bordered={false} className="paddingB18">
          <Row gutter={16}>
            <Col lg={12} md={16} sm={24}>
              <div className="dottedBox" style={{ marginBottom: 20 }}>
                <div className="subtitle marginB12">
                  服务费结算
                  <Radio value={1} defaultChecked disabled style={{ marginLeft: 8 }}>充值模式</Radio>
                </div>
                <Descriptions column={1}>
                  <Item label="派件服务费（￥）/件">
                    {deliveryServiceFee === 0 ? '0.00' : deliveryServiceFee}元
                  </Item>
                  <Item label="揽件服务费（￥）/件">
                    {sendingServiceFee === 0 ? '0.00' : sendingServiceFee}元
                  </Item>
                  <Item label="寄存服务费（￥）/件">
                    {depositServiceFee === 0 ? '0.00' : depositServiceFee}元
                  </Item>
                </Descriptions>
              </div>
            </Col>
            <Col lg={12} md={16} sm={24}>
              <div className="dottedBox" style={{ marginBottom: 20 }}>
                <div className="subtitle marginB12">增值服务费</div>
                <Descriptions column={1}>
                  <Item label="短信服务费（￥）/条">{smsServiceFee === 0 ? '0.00' : smsServiceFee}元</Item>
                </Descriptions>
                <div className="subtitle marginB12 marginT16">提现手续费</div>
                <Descriptions column={1}>
                  <Item label="提现手续费比例">{contractDetail.withdraw_charge_ratio}‰</Item>
                </Descriptions>
              </div>
            </Col>
          </Row>
        </Card>

      </Fragment>
    );
  }
}

export default PosthouseContractDetail;
